1. typescript使得js在书写的过程中有了参数类型的限制在 传参的过程中变得严格，减少了不必要的错误的发生
2. tslint同时也兼备了一部分eslint的作用，在一定程度上我们使用tslint可以取代eslint
3. 使用typescript的初期经常会在为了不报错而书写代码，其实这是习惯上的问题，主动的去接受typescript的约束，养成书写严格的代码的习惯就可以很快适应并且感触到ts的好处。
4. 以下只是入门级别的一些方法，ts有很多概念需要去记住
配置
前端项目开发目前一般都是webpack + babel这样的方式去进行的，除此之外还有gulp，gulp和webpack相似的一点是他们都是基于传递文件流的方式，
react项目中的使用
npm install --save react react-dom @types/react @types/react-dom
需要安装@types/react和@types/react-dom
开发时依赖
npm install --save-dev typescript awesome-typescript-loader source-map-loader
awesom-typescript-loader是用来编译tsconfig,.json的 source-map-loader是用来生成ts的sourcemap文件的
项目根目录下新建一个tsconfig.json文件，如下这种
{
" compilerOptions " : {
" outDir " : " ./dist/ " ,
" sourceMap " : true ,
" noImplicitAny " : true ,
" module " : " commonjs " ,
" target " : " es5 " ,
" jsx " : " react "
},
" include " : [
" ./src/**/* "
]
}
可以使得规则被webpack awesom-typescript-loader的加载得以运用在项目中
以下是一个配置示例，这里变的注释很重要，注释很重要，注释很重要。
module.exports = {
entry: " ./src/index.tsx " ,
output: {
filename: " bundle.js " ,
path: __dirname + " /dist "
},
// Enable sourcemaps for debugging webpack's output.
devtool: " source-map " ,
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [ " .ts " , " .tsx " , " .js " , " .json " ]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: " awesome-typescript-loader " },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: " pre " , test: /\.js$/, loader: " source-map-loader " }
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
" react " : " React " ,
" react-dom " : " ReactDOM "
},
};
使用
最简单的用法，在函数的参数中定义属性的类型，可以定义string number boolean这些基本类型
function greeter(person: string ) {
return " Hello, " + person;
}
let user = " Jane User " ;
document.body.innerHTML = greeter(user);
那如果参数是对象或者数组呢，这时候ts引入了一个新的概念叫做interface，我们可以声明一个interface 然后作为参数类型
interface Person {
firstName: string ;
lastName: string ;
}
function greeter(person: Person) {
return " Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: " Jane " , lastName: " User " };
document.body.innerHTML = greeter(user);
复杂类型的定义
let subAccountTableColumns: Array<{ title: string ; dataIndex: string , align?: string }> = [
{ title: ' 账户名称 ' , dataIndex: ' name ' , align: ' center ' },
{ title: ' 绑定邮箱 ' , dataIndex: ' email ' },
{ title: ' 状态 ' , dataIndex: ' status ' , align: ' center ' },
{
title: ' 标准授权 ' ,
dataIndex: ' standardAuthorization ' ,
align: ' center '
},
{
title: ' 扩张授权 ' ,
dataIndex: ' extendedAuthorization ' ,
align: ' center '
},
{ title: ' 备注 ' , dataIndex: ' note ' , align: ' center ' },
{ title: ' 操作 ' , dataIndex: ' action ' , align: ' center ' }
]
1. 如果需要定义可选的参数需要用 ?: 表示这个参数是可选的
2. 如果需要定义复杂的数组可以用Array<>这种写法
函数返回值
假如我们放一个函数作为参数的时候，那么需要定义函数的返回值，
function identity(arg: number): number {
return arg;
}
书写方法
在书写ts的时候会有一些疑虑
1. 分隔符 以下的三种写法其实都是可以的， 那应该用那一种呢
interface Person {
firstName: string ,
lastName: string
}
interface Person {
firstName: string
lastName: string
}
interface Person {
firstName: string ;
lastName: string ;
}
当然是都可以的咯，但是在同行的情况下就需要用分隔符了，那么选择用那种方式，项目统一一下就好了
2. 对象和类型
let a: String = ' test ' let b: string = ' test '
基于js的一切都是对象的说法，第一种和第二种在ts里是等价的
但推荐用第二种，因为基本类型是构成约束的本质，而String不是基本类型，虽然它同样具有约束基本类型的能力
其次在ts里只有string, boolean, number, any这些可以小写的类型