从零学习TS(一)

xyz_fish
882 阅读5分钟

从零学习TS(一)

加入我们的对赌学习吧 联系#阿崔cxr

整理第一天的学习--分成三个大部分 和 一些重点的知识点

  1. 什么是TS
  2. TS的类型
  3. 编译/修改默认配置编译
    • TS默认配置
    • TS的安全检测和自动推算类型
    • interface 和 type 的区别

前言

学习TS 第一步先来搞下环境

// 先创一个目录
mkdir learn-ts
// 进入项目
cd learn-ts
// 初始化一个项目
npm init -y
// 安装typescript
npm i -D typescript

1、什么是TS

简单来说TS就是JS的超集， 在JS上加上类型检测

  1. 先分别用js 和 ts 来写一个add函数 和他的调用 先创建index.js

     ```js
 function add (a, b) {
     return a + b
 }
 add(1)
 ```

    执行index.js后 结果是个NaN 这是显然不是我们需要的，add方法的调用 没有传入参数 显示是不正确的调用

    那在创建一个tsIndex.ts

    function add (a, b){
    return a + b
}
add(1)

    TS会自动给我提示 Expected 2 arguments, but got 1.ts(2554)\()An argument for 'b' was not provided. TS给出了正确的调用方式，并且TS给出了add跳动的自动方式

    再来一个例子

     const names = ["Alice", "Bob", "Eve"];

 names.forEach(function (s) {

 console.log(s.toUppercase());
 // 这里会提示 s 是 string 类型 没有toUppercase() 这个方法 而 js却不会直接提示
 });

  2. TS解决了开发中的什么问题

  • 这让我们在开发中有效避免了很多低级的错误（ps: 很多时候就是因为一些低级错误花费了好多时间）
  • 尤其是团队中的开发，公用的方法供其他人使用的时候，可以避免使用上的错误

对于为什么使用TS 该不该使用TS 不是重点 重点是我们在从零学习TS，我们需要的是怎么用TS去写我们的代码

如何把ts文件编译成js？ tsc xxx.ts => xxx.js

2.TS如何定义类型

在创建变量并将其分配给特定值时，TypeScript 将使用该值作为其类型。称之为自动推理类型，这样我们可以省去写类型的代码

let message = 'hello world'

TS有哪些类型

先列出来基本类型

  • string

  • number

  • boolean

  • 数组: 有两种写法：1 直接写 type[] 2 泛型写法 Array

  • 元组

    let num = 1
let str = 1
let isOk = true
let arr = [1, 2, 3]
let arr2 = ['Beijing', 'Shanghai', 'Shenzhen']
let tuple = ['string', 1]

    很多时候不需要去定义类型 就像上面的代码，TS会自动推算类型 大多数情况下，不需要明确学习推理规则。如果您刚开始，请尝试使用比您想象的更少的类型注释 - TS比我们想象的厉害

  • any

    当不确定输出的内容的时候就可以用这个远近闻名的any了, 当TS自动推算类型推算不出时会把类型定义成any

    let user: any = {
    a: 'A'
}

user.b // is ok
user.add() // is ok

    这里需要提下ts的配置参数 noImplicitAny（默认是true）: 对具有隐式 “any” 类型的表达式和声明启用错误报告。当noImplicitAny是true时，对于被自动推算类型是any的时候会提示报错，大多数情况我是设置成false的

  • object

    可以用 interface 也可以用type

    interface Person {
    name: string
    age: number
}
// 或者 type Person = { name: string; age: number }

fucntion greet(person: Person) {
    console.log(`name: ${person.name}, age: ${person: person.age}`)
}

  • 枚举：

    关键字 enum 留待细说

    enum {
    Age,
    Name
}

  • 其他的

    void 代表 没有任何类型

    null --- 就是js的null

    undefined --- 就是 undefined

  • 联合类型

    type Uuid = string | number

interface 和 type 区别

  • 首先两者都可以去定义对象和函数，而type还可以定义其他任何类型 type 要加上=

    interface Obj {
    prop: string
}

interface greet {
    (arg1: number): void
}

type Obj = {
    prop: string
}

type greet = (arg1: number): void

  • 类型合并或者继承等这些操作，interface和type的方式不一样

        interface Name { 
      name: string; 
    }
    interface User extends Name { 
      age: number; 
    }
    
    type NameType {
        name: string
    }

    type User = NameType & {
        age: number
    }
    
    // type 也可以 & interface定义的接口
    type User = Name & {
        age: number
    }

  • interface 可以扩展接口 而type 只能像上面通过 & 定义新的类型

    // 比如我们常用的全局加上新的变量： wx (小程序还有jssdk) 我们就可以window.wx ts不提示报错了
// type 则无法扩展Window的属性
interface Window {
    wx: any
}
// 再提及一个Vue3的CustomComponentProps、ComponentCustomProperties 也是通过interface可以扩展新添加的属性的类型

  • type 可以通过 tpyeof 定义一个类型 比如在Vue中自己写的组件的类型可以通过 type CompoenntType = tpyeof CustomComponent

     type CustomComponentRefType = typeof CustomComponent
 // CustomComponent 是自己写的组件

  • type 在处理联合类型和泛型有很多操作--后面去学习哇

一些的配置

  • 获取默认的配置 tsc --init 会生成一个默认的tsconfig.json tsc --init --locale zh-cn 会生成一个默认的中文注释的tsconfig.json 这样可以很容易的去了解tsconfig的每个字段配置代表什么意思

  • tsc 会默认去找项目根目录下的tsconfig.json 当然命令行的参数设置优先级会高一些

  • 昨天重新了解的一些配置
    1、上面讲到了一个noImplicitAny 2、noEmitOnError：如果有错误 是否编译输出文件 3、target: 编译输出后js文件的版本 es5 es2015等 3、lib: 我们项目所用到的js的版本库: 编译时引入的 ES 功能库，包括：es5 、es6、es7、dom 等。如果未设置，则默认为： target 为 es5 时: ["dom", "es5", "scripthost"] target 为 es6 时: ["dom", "es6", "dom.iterable", "scripthost"] 可以手动加入一些库promise等相关

    总结

    跟着崔大一起重新手撸起文档 环境 => tsc 编译 => 加上一些变异的配置的tsc => 类型 类型自动推导 => 每个文档例子来一遍 => 类型 => interface 可扩展 type 不可以 等等

    贴上一个链接 该不该用typescript

    重点: 学习

end

最后大家一起加入我们的学习吧
avatar
文章
阅读
粉丝