TypeScript 노트 요약
12629 단어 typescriptvue.js프런트엔드
서문 소개
일반 유형
기초편은 빠르게 넘어가서...
let s: string = 'i am string' let n: number = 1 let b: boolean = true // undefined undefined
// null null
//
let ud: undefined = undefined
let nu: null = null // void
// void undefined null
const popup = (): void => {
console.log('function no return')
}
let useless: void = undefined // , any
let anyType: any = 'str' let uk: unknown;
// unknown any unknown :
unknown , , as
any , 。
// unknown , let arr1: (number | string)[] = [1, 2, 3, '2121']
let arr2: Array = [2, 2, 2, true] // , ;
//
let t1: [string, number, boolean | string]
t1 = ['hello', 123, false] //
// never :
// never ,
const err = (msg: string): never => {
throw new Error(msg)
}
// err('hahaahah') let ss: symbol = Symbol('hello')
console.log(ss) let obj: {name: string, value: number} = { name: 'huhua', value: 1232 }
let obj1: object = { name: ' ', value: 1232 }
console.log(obj, obj1, obj.name)
// console.log(obj1.name) // name object let myAdd = (x: number, y: number): number => x + y
let add = (x: number, y: number) => x + y // ,
console.log(myAdd(1, 2), add(3, 100))
let compute: (x:number, y:number) => number //
compute = (aaa, bbb) => aaa + bbb열거 유형enum
매거: 우리는 상량의 집합으로 이해할 수 있고 하드코딩 문제, 특히if문장의 판단값을 해결하는 데 도움을 줄 수 있다.
export enum EState {
one = 1,
two,
three,
four,
five,
six,
seven
}
: EState['one'] === 1; EState[1] === 'one'
; enum Direction {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
console.log(Direction['Right'], Direction.Up); // Right Upenum StrNum {
n = 0,
y = 'yes'
}// ,
const enum Direction {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
const up = Direction.Up
console.log(up)인터페이스 인터페이스
인터페이스(Interfaces)는 대상의 형상(Shape)을 설명하는 데 사용됩니다. 인터페이스는 일반적으로 우리가 정의한 대상, 함수, 클래스의 구조와 유형을 제약하는 데 사용됩니다.
// ， ( , )
interface Person {
readonly id: number //
name: string
age: number
sex?: string //
[key: string]: any // , ; any
} ,
interface Func {
(x: number, y: number): number
}
let addSum1: Func
addSum1 = (a, b) => a + b// ， , （implements)
// ;
// public
//
interface Man {
name: string
age: number
}
class Huhua implements Man {
//
name!: string //
age!: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
eat() {
console.log('eat food')
}
}//
interface Alarm {
alert();
}
interface LightableAlarm extends Alarm {
lightOn();
lightOff();
}
//
class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};함수 유형
// function
function add(a:number, b: number) {
return a + b
}
// ,
let add: (a: number, b: number) => number
type Add: (a: number, b: number) => number
interface IAdd {
(a: number, b: number): number
}// , , :
function add(a: number, b = 100, c?: number) {
return c ? a + b + c : a + b
}
function add(x: number, ...rest: number[]) {
return x + rest.reduce((pre, acc) => pre + acc)
} , ,
function add(...rest: number[]): number
function add(...rest: string[]): string
function add(...rest: any[]): any {
let first = rest[0]
if (typeof first === 'string') {
return rest.join('')
}
if (typeof first === 'number') {
return rest.reduce((pre, acc) => pre + acc)
}
}클래스 유형class
ts는 주로 구성원의 유형 주석과 구성원 수식자를 추가한다.ES6에서 클래스의 데이터 유형은 바로 함수이다. 클래스 자체가 구조 함수를 가리키는데 그 방법은 모두 구조 함수의protype 속성에 정의된다.우리는 ClassName을 통과할 수 있습니다.prototype.xxx 방문
class Car {
// :
_wheel: number = 4
// : （ this）
constructor(name: string) {
this.name = name
}
//
readonly oil: string = ' '
// public :
public name: string = 'car'
//
run() { console.log(this.name + 'runing...') }
// :
private priv() { console.log('priv') }
// :
protected pro() {}
// :
static seats: string = ' '
}
let bz = new Car('benz') // new
let bm: Car = new Car('bm') //
console.log(Car.seats)class Bmw extends Car {
constructor(name: stirng, public color: string) {
//
super(name)
this.color = color
}
}
console.log(Bmw.seats)abstract class Animal {
// abstract
abstract say(): void;
move(): void {
console.log('i can move')
}
}
class Dog extends Animal {
// , ;
say() {
console.log(' ');
}
}
let dog1 = new Dog()
dog1.say() //
dog1.move() // i can move ， （interfaces）， implements
// ( );
// public
//
interface Alarm {
alert();
}
interface Light {
lightOn();
lightOff();
}
class Car implements Alarm, Light {
alert() {
console.log('Car alert');
}
lightOn() {
console.log('Car light on');
}
lightOff() {
console.log('Car light off');
}
}범형(유형에 대한 전삼에 해당)
범형: 함수, 인터페이스, 클래스를 정의할 때 구체적인 유형을 미리 지정하지 않고 사용할 때 유형의 특성을 다시 지정합니다.선언과 동시에 유형 변수의 유형 값을 지정합니다.
// 1.
// T any
// any
function log(v: T): T {
return v;
}
let s: string = "generics";
let a = log(s);
console.log(a);
console.log(log(1111));
// 2.
// , type 。
// type Log = (v: T) => T //
interface Log {
(v: T): T;
}
let myLog: Log = log;
console.log(myLog([1, 2, 3]));
// 3.
//
//
interface IGeneric {
(v: T): T;
}
let IG1: IGeneric = log;
console.log(IG1(123));
// 4.
class GenericNumber {
//
// zeroValue: T = T;
add(x: T, y?: T) {
console.log(x);
return x;
}
}
let myGenericNumber = new GenericNumber();
myGenericNumber.add(1);
let myG1 = new GenericNumber();
myG1.add("hello ts generics");
// 5.
interface Length {
length: number;
}
// T Length , length value.length
function ggg(value: T): T {
console.log(value, value.length);
return value;
}
ggg('hello')
ggg([1, 2, 3]) 이론 진급편
ts 유형 검사 메커니즘
1.instanceof
if (c instanceof A) c.a
2.in
if (c in C) c.a
3.typeof
if (typeof arg === 'string') {} else {}
4.
결합, 교차, 색인 유형
// ;
// K keyof T: ;
// T[K];
// T extends U
interface IObj {
a: string
b: number
}
let key: keyof IObj
let k: IObj['a']
let iobj = {
a: 1,
b: 2,
c: 'ccc'
}
//
function getObjValue(obj: T, keys: K[]): T[K][] {
return keys.map(key => obj[key])
}
console.log(getObjValue(iobj, ['a', 'c']));
// console.log(getObjValue(iobj, ['a', 'd'])); 공정 실천 편
이것은 우리가 정식 개발에서ts를 사용하는 기교와 규범에 대한 설명이다
tsconfig.json
//ts 프로젝트 프로필 설명https://segmentfault.com/a/11...http://www.typescriptlang.org...
선언 파일 xxx.d.ts
declare var
declare function
declare class
declare enum
declare namespace （ ）
declare interface type
export
export namespace （ ）
export default ES6
export = commonjs , import xx = require('xxx')
export as namespace UMD
declare global
declare module ts 도구 클래스 (일반)
type Partial = { [P in keyof T]?: T[P] };
type p = Partial type T = Exclude<1 | 2, 1 | 3> // -> 2type Foo = Omit // -> { age: number }개발한 기교들
업데이트 예정...
질문
본인은 vue 프로젝트에서 먼저 사용했는데 지원이 좋지 않은 것 같아서...하지만 이를 악물고 한 항목을 완성했고, 후속으로react에서 사용할 예정입니다.
https://github.com/vuejs/vue-docs-zh-cn/tree/master/vue-class-component
https://github.com/kaorun343/vue-property-decorator
https://github.com/ktsn/vuex-class
https://github.com/championswimmer/vuex-module-decorators
=> value
as => value as string
(this.$refs['multiTable'] as any).clearSelection()
(this.$refs['downParams'] as Form).resetFields() ((this.$refs.saveTagInput as Vue)['$refs'].input as HTMLInputElement).focus()이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Typescript 팁: 브랜드 유형을 사용하면 더 안전한 기능을 사용할 수 있습니다.다음과 같은 함수가 있다고 상상해 보십시오. 페이지 번호는 음수가 될 수 없기 때문에 분명히 잘못된 것입니다. 간단한 해결책은 다음과 같은 줄을 추가하는 것입니다. 그러나 음수로 함수를 호출하려고 할 때 유형 오류가...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
