一.JavaScript 형
JavaScript 에는 7 종의 형이 있습니다: Boolean, Number, String, Undefined, Null, Object, 및 ES6 에서 추가된 [Symbol](/articles/symbol-es6 노트 7/)
이들 7 종의 형은 TypeScript 모두 서포트합니다:
// JavaScript 가 서포트하는 7 종의 형
let isDone: boolean = false; // 布尔值
let decimal: number = 6; // 数值
let color: string = 'blue'; // 字符串
let u: undefined = undefined; // Undefined
let n: null = null; // Null
let obj: object = {}; // Object
let sym: symbol = Symbol(); // Symbol
변수 선언
위의 예 중의 변수는 모두 let 로 선언되었지만, 실제로는 3 종의 변수 선언 방법이 있습니다:
-
var: 함수 스코프 -
let: 블록 레벨 스코프 -
const: 블록 레벨 스코프, 상수 (변경 불가)
예를 들어:
var a: string = 'a';
let b: string = 'b';
const c: string = 'c';
JavaScript 변수 선언 방법과 완전히 일치하며, 더 이상 자세히 설명하지 않습니다. 상세는 Variable Declarations 참조
P.S. 실제로, let 와 const 는 최종적으로 모두 var 로 컴파일되며, 블록 레벨 스코프 등 특성은 변수 리네임을 통해 시뮬레이션됩니다
二.TypeScript 형
TypeScript 에는 합계 13 종의 기본 형이 있으며, JavaScript 의 모든 7 종에 더해, 이하가 있습니다:
-
Array: 배열, 같은 형의 요소의 그룹을 나타냄
-
Tuple: 튜플, 고정수의 요소의 그룹을 나타냄 (요소의 형이 같을 필요는 없음), 예를 들어 이원조, 삼원조
-
Enum: 열거형, 상수의 집합
-
Any: 임의의 형, 미지의 형을 나타냄, 예를 들어 동적 콘텐츠 (사용자 입력, 또는 서드파티 라이브러리) 또는 형을 모르는 것 (혼합형 배열),
any형을 선언하여형 체크를 회피할 수 있음 -
Void: 공의 형, 형이 없는 것을 나타냄, 예를 들어 반환값이 없는 함수의 반환값의 형
-
Never: 결코 존재하지 않는 값의 형, 예를 들어 결코 돌아오지 않는 함수 (반드시 예외를 던지는, 또는 함수 본체에 무한 루프가 있는) 의 반환값의 형
예는 다음과 같습니다:
// TypeScript 가 추가한 6 종의 형
let list: number[] = [1, 2, 3]; // 数组
let list: Array<number> = [1, 2, 3]; // 数组
let x: [string, number] = ["hello", 10]; // 元组
enum Color {Red = 'r', Green = 'g', Blue = 'b'} // 枚举
let notSure: any = 4; // 任意类型
let list: any[] = [1, true, "free"]; // 任意类型数组（未知类型）
function warnUser(): void {/*..*/} // 空类型
function neverReturn(): never {throw 'error';} // 绝不存在的类型
몇 가지 점에 주의가 필요합니다:
-
Array 형에는 2 종의 선언 형식이 있습니다 (
elemType []와Array<elemType>) -
Tuple 에 액세스하여 경계를 넘은 경우, 유니온 형 (union type) 이 적용되므로, 위의 예에서
x[10]의 형은string | number입니다 -
Enum 값은 생략 가능하며, 디폴트에서는 key 의 선언 순서에 따라
0에서 시작합니다. 수치 를 지정한 경우, 다음 항의 값은 이에 기반하여 증가하며, 否则그 후의 항 모두에 값을 지정할 필요가 있습니다 (디폴트의 수치 증가 메커니즘이 대응할 수 없게 됩니다) -
Any 형은로컬의 형 체크 스위치에 상당하며, 이는 TypeScript 와 JavaScript 코드가 공존하는 프로젝트에서 매우 의미가 있습니다
-
Void 형의 변수도 합법이며, 값은
undefined또는null로만 제한됩니다 -
Null, Undefined 및 Never 는 다른 형의 서브타입이므로, 다른 임의의 형의 변수에 대입할 수 있습니다 (예를 들어
let str: string = null도 합법입니다) -
다른 임의의 형도 Never 형에 대입할 수 없습니다, Any 라도 안 됩니다
-
Never 형의 변수도 합법이며, 此时 Never 는형 보호로서 사용할 수 있습니다 (예를 들어
declare const name: never;로 암묵적인window.name에의 액세스를 회피)
P.S. 특별한 경우, 권장 은 --strictNullChecks 옵션을 온으로 하는 것으로, 此时 Undefined 와 Null 은 Void 및 각자 대응하는 형에만 대입할 수 있습니다
P.S.Never 가 형 보호로서 사용하는 응용에 대해서는, Improve type safety of name global variable 참조
三.형 어설션
형 어설션을 통해, TypeScript 컴파일러에 어떤 값의 정확한 형을 알릴 수 있습니다:
Type assertions are a way to tell the compiler "trust me, I know what I'm doing."
다른 언어의강제 형 변환 (type casting) 에 유사하지만, 형 어설션은 컴파일 시のみ이며, 형 변환처럼 런타임 영향을 가지지 않는 점이 다릅니다:
A type assertion is like a type cast in other languages, but performs no special checking or restructuring of data. It has no runtime impact, and is used purely by the compiler.
2 종의 구문 형식이 있으며, 각각 <type> 와 as type 입니다. 예를 들어
let someValue: any = "this is a string";
// <type>
let strLength: number = (<string>someValue).length;
// as type
let strLength: number = (someValue as string).length;
2 개의 방법은 동등하지만, JSX 에서는 as type 만 사용할 수 있습니다 (산괄호 구문이 JSX 구문과 충돌하기 때문)
四.자주 ���용하는 테크닉
열거 key 에의 액세스
실제로, TypeScript 열거형은 key-value 의쌍방향 인덱스를 확립하고 있습니다. 예를 들어:
enum Color {Red = 1, Green, Blue}
// 对应的 JavaScript 为
var Color;
(function (Color) {
Color[Color["Red"] = 1] = "Red";
Color[Color["Green"] = 2] = "Green";
Color[Color["Blue"] = 3] = "Blue";
})(Color || (Color = {}));
// 得到
// {1: "Red", 2: "Green", 3: "Blue", Red: 1, Green: 2, Blue: 3}
따라서, 재미있는 테크닉은열거 값을 통해 key 에 액세스하는 것입니다:
let colorName: string = Color[2];
// 此时，colorName 为'Green'
global 의 수정
Any 형은 컴파일 시 형 체크를 회피하기 위해 사용되므로, 변경할 수 없는 것을 수정하기 위해 사용할 수 있습니다. 예를 들어:
window.customFunction = myCustomFunction;
컴파일 에러:
Property 'customFunction' does not exist on type 'Window'.
any 형을 통해 회피할 수 있습니다:
const globalAny: any = window;
globalAny.customFunction = myCustomFunction;
또는 동등의 형 어설션:
(<any> window).customFunction = myCustomFunction;
// 或
(window as any).customFunction = myCustomFunction;
아직 댓글이 없습니다