React 整合
Node.js TypeScript 与 React 整合
npm install typescript --save-dev
yarn add typescript
npm install -g ts-node
yarn add ts-node
tsc --init
{
"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",
]
}
需要安装 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}`);
}
会产生自订的变数,但觉得还是少用比较好,执行比较没有效率,用 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) {
}
可以扩充的 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;
}
}
type Employee = {
name: string;
age: number;
}
const obj : Employee = {
name: 'KJ',
age: 17,
};
定义后端 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 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')
Node.js TypeScript 与 React 整合
Node.js TypeScript Utility 工具
Node.js TypeScript 常见问题