什么时候用TypeScript，和使用技巧

原创已于 2022-08-16 13:28:25 修改 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #linux #运维

于 2020-07-08 12:48:04 首次发布

js学习专栏收录该内容

84 篇文章

订阅专栏

本文探讨了TypeScript在大型项目及开源项目中的优势，包括增强代码可维护性、支持命名空间管理和与Vue3的无缝集成。通过具体示例介绍了TypeScript的基本用法，包括数据类型定义、接口使用及在Vue中的配置建议。

ts选型：
参考:https://v.qq.com/x/page/b3266gawfqp.html
什么项目需要TS
1.大项目TS
2.可扩展性，参与的人数够多，3-5人以上，维护周期比较长
3.适合开源项目
4.命名空间管理namespace

namespace Ailjx {
    // a没有使用export向外暴露，在外部无法访问
    let a;
    export const str = "Ailjx";
    export type S = string;
    export function f() {}
    export class N {}
}

const s: Ailjx.S = Ailjx.str;
Ailjx.f();
new Ailjx.N();
// 类型“typeof Ailjx”上不存在属性“a”
// console.log(Ailjx.a);// err

vue2+ts+decorator(装饰器)
坑很多，涉及动态类型(如：组件this)，没法正确推论，所以带来很多苦恼

vue3函数式编程思路,支持ts更丝滑
使用方法：创建vue-cli4.5以上版本，支持vue3
在这里插入图片描述
vue3函数式编程思路,支持ts更丝滑
使用方法：创建vue-cli4.5以上版本，支持vue3

TypeScript 总结
npm init
cnpm i -D ts-loader typescript // 安装
tsc -V // 检查版本
然后增加tsconfig.js文件
tsc 文件名.ts // 把ts文件编译成js，方便浏览器调用
tsc -w侦听整个项目，自动编译js

cnpm i -g ts-node // 自动把ts编译为js,如果用webpack，就不用安装这步
ts-node 文件名.ts

一、定义数据类型
let result:string|number // 联合数据类型

二、接口

//定义接口
interface Person {
  name: string
  age: number // 必选属性
  job?: string //可选属性，表示不是必须的参数，
  readonly salary: number //表示是只读的属性,但是在初始化之后不能重新赋值，否则会报错
  [propName: string]: any // 任意类型
}
//定义一个变量，它的类型时接口Person，这样就约束了接口的内容
let person: Person = {
  name: 'jack',
  age: 28,
  job: 'IT dog',
  id: 9872,
  salary: 9999,
}

function printMan(person: Person) {
  console.log(
    `我是 ${person.name}, 我今年 ${person.age},我的工作是${person.job}`
  )
}
printMan({ name: 'dhk', age: 30, job: '234', id: 343, salary: 100 })


三、vue 中使用推荐配置(https://cn.vuejs.org/v2/guide/typescript.html)
// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据 property 进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

{
“compilerOptions”: {
“allowUnreachableCode”: true, // 不报告执行不到的代码错误。
“allowUnusedLabels”: false, // 不报告未使用的标签错误
“alwaysStrict”: false, // 以严格模式解析并为每个源文件生成 "use strict"语句
“baseUrl”: “.”, // 工作根目录
“experimentalDecorators”: true, // 启用实验性的ES装饰器
“jsx”: “react”, // 在 .tsx文件里支持JSX
“sourceMap”: true, // 是否生成map文件
“module”: “commonjs”, // 指定生成哪个模块系统代码
“noImplicitAny”: false, // 是否默认禁用 any
“removeComments”: true, // 是否移除注释
“types”: [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
“node”, // 引入 node 的类型声明
],
“paths”: { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
“src”: [ //指定后可以在文件之直接 import * from ‘src’;
“./src”
],
},
“target”: “ESNext”, // 编译的目标是什么版本的
“outDir”: “./dist”, // 输出目录
“declaration”: true, // 是否自动创建类型声明文件
“declarationDir”: “./lib”, // 类型声明文件的输出目录
“allowJs”: true, // 允许编译javascript文件。
“lib”: [ // 编译过程中需要引入的库文件的列表
“es5”,
“es2015”,
“es2016”,
“es2017”,
“es2018”,
“dom”
]
},
// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
“include”: [
“src/**/*”
],
// 指定一个排除列表（include的反向操作）
“exclude”: [
“demo.ts”
],
// 指定哪些文件使用该配置（属于手动一个个指定文件）
“files”: [
“demo.ts”
]
}


注意你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。