标签：led lint important standard compile 邮箱 用法 interface json
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这些可以小写的类型
标签：led lint important standard compile 邮箱 用法 interface json
原文地址：https://www.cnblogs.com/sowhite/p/9223783.html
