TypeScript

Node.js TypeScript

环境

安装

TypeScript

npm install typescript --save-dev
yarn add typescript

ts-node

npm install -g ts-node
yarn add ts-node

初始化

tsc --init

tsconfig.json

{
  "compilerOptions" : {
    // 目标语言: es6, es2015, es2016, es2017, es2018, es2019, es2020
    "target" : "es5",
    "module" : "commonjs",
    // 产生对应原始档
    "sourceMap" : true,
    "inlineSourceMap" : true,
    // 输出 js 档案目录
    "ourDir" : "./dist",
    // 来源目录
    "rootDir" : "./src",
    // 移除註解
    "removeComments": true,
    // 不产生 js 档案
    "noEmit" : true,
    // 错误不产生 js 档案
    "noEmitOnError" : true,

    // 检查不能有没有使用的区域变数
    "noUnusedLocals" : true,
    // 检查不能有没有使用的函式参数
    "noUnusedParameters" : true,
    // 检查不能有没有没确回传资料
    "noImplicitReturns" : true,
  },
  // 排除编译的目录档案
  "exclude" : [
    "test.ts",
    "*.dev.ts",
    "**/*.dev.ts",
    "node_modules",
  ],
  // 要编译的目录档案
  "include" : [
    "app.ts",
  ]
}

立即执行 TypeScript

需要安装 ts-node 套件

# 直接执行 typescript 档案
ts-node app.ts

编译

# 编译 typescript 档案
tsc app.ts
# 编译 typescript 档案,并监看是否有异动自动重新编译
tsc app.ts --watch
tsc app.ts --w

变数类型

类型 说明
number 整数
string 字串
boolean 布林值
object 物件
array 阵列
Tuple 阵列规则
enum 列举
any 不限制,很少用,除非 debug
unknown 未知
Function 函式

回传值

类型 说明
void 空值
never 不回传

定义变数

let addNumber: Function;
let addNumber: (a: number, b: number) => number;
let num: number;
let name: string = 'KJ';
let name: string | number = 'KJ';
let n: null = null;
let nn: undefined = undefined;
let test: any;
let arr: string[] = ['a', 'b'];
let arr: string[][] = [['a', 'b']];
let tup : [number, string, boolean] = [1, 'a', true]
let tup : [string, string][] = [['a', 'b'], ['c', 'd']]

定义函式传入及回传参数

function printNumber(num: number): void {
  console.log(`Result: ${num}`);
}

function addAndCallback(num1: number, num2: number, cb: (num: number) => void) {
  const result = num1 + num2;
  cb(result);
}

// num2 有加 ?,所以表示可传可不传
function printNumber(num: number, num2?: number): void {
  console.log(`Result: ${num}`);
}

列举类型 enum

会产生自订的变数,但觉得还是少用比较好,执行比较没有效率,用 JavaScript const 变数解决这个问题就好

enum Role {
  ADMIN,
  READ_ONLY,
  AUTHOR
}

enum Role {
  ADMIN = '33',
  READ_ONLY = '44',
  AUTHOR = '55',
}

// 使用 Enum 变数
if (user.role == Role.ADMIN) {

}

自订类型

type MyCustomType = number;
type MyCustomType = number | string;
type MyCustomType = 'Kay' | 'Jay';

function(num: MyCustomType) {

}

Interface

可以扩充的 Type

interface Employee {
  name: string;
  age: number;
}

interface Employee {
  // ? 允许 undefined
  desc?: string;
}

class 实作 interface

interface CarProps {
  name: string
  age: number
}

class Car implements CarProps {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

Object

type Employee = {
  name: string;
  age: number;
}

const obj : Employee = {
  name: 'KJ',
  age: 17,
};

断言 as unknown

定义后端 API 回传资料格式

type Data = {
  userId: number,
  id: number,
  title: string,
  completed: boolean
}


async getData = () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await res.json() as Data;
}
const data1 = Data {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
};

type Beta = {
  name: string
}

const beta = data1 as unknown as Beta;

Class

  • private
  • public
  • protected
class Live {
  public roomName: string
  private id: string
  protected name: string

  constructor( room_name: string, room_id: string, holder_name: string) {
    console.log('建立直播');
    this.roomName = room_name;
    this.id = room_id;
    this.name = holder_name;
  }
}

const live = new Live('LOL 直拨', '001', 'Kay');
console.log(live);
class LolLive extends Live {
  constructor( room_name: string, room_id: string, holder_name: string) {
    super(room_name, room_id, holder_name);
  }

  start() {

  }
}

const LolLive = new LolLive('LOL 直拨 2', '002', 'Jay');

私有变数

class GameLive {
  //  私有变数
  #name
  constructor (name : string) {
    this.#name = name;
  }
}

泛型

function print<T> (data: T) {
  console.log('data', data);
}

print<number>(777);
print<string>('KJ');
print<boolean>(true);
class Print<T> {
  data: T
  constructor(d: T) {
    this.data = d;
  }
}

const p = new Print<number>(999)
const p = new Print<string>('KJ')

参考资料

官方

教学影片

套件


React 整合

Node.js TypeScript 与 React 整合

Utility 工具

Node.js TypeScript Utility 工具

常见问题

Node.js TypeScript 常见问题