Table of Contents [hide]
Types
Number
BigInt
String
Boolean
The “null” value
The “undefined” value
Symbol
Object
Array
Tuple
Enum
Void
Never
Any
Type inference
Conclusion: Getting Started With React and TypeScript Pt.2
Các loại Trước khi bắt đầu sử dụng React và TypeScript, bạn nên làm quen với các kiểu mà bạn có thể sử dụng trong TypeScript. TypeScript hỗ trợ tất cả các kiểu tồn tại trong JavaScript. Trên hết, TypeScript bổ sung thêm một số kiểu mới. Dưới đây là tổng quan về các kiểu bạn có thể mong đợi và sử dụng khi làm việc với React và TypeScript cùng nhau hoặc chỉ với TypeScript.
Number
Giống như trong JavaScript, kiểu số đại diện cho cả số nguyên và số dấu phẩy động. Nói cách khác, không có một kiểu cụ thể nào dành cho số nguyên và kiểu khác dành cho phao. Cả hai được thống nhất dưới cùng một loại, số lượng. Những con số này cũng bao gồm các chữ thập lục phân và thập phân, và các chữ nhị phân và bát phân được giới thiệu trong ECMAScript 2015.
// The ': number' after variable name
// and before equal sign specifies number type
// Declare new variable of type number
let numberExample: number
// Assign a value to 'numberExample'
numberExample = 979
// Declare and initialize variable of type number
const numberInteger: number = 13 // number type is not necessary here due to type inference
const numberFloat: number = 8.12 // number type is not necessary here due to type inference
const numberHex: number = 0xf00d // number type is not necessary here due to type inference
const numberBinary: number = 0b111110111 // number type is not necessary here due to type inference
const numberOctal: number = 0o767 // number type is not necessary here due to type inference
BigInt
Loại BigInt là một loại mới gần đây đã được thêm vào đặc tả ngôn ngữ JavaScript. Tại sao? Trong JavaScript, kiểu số không thể đại diện cho các giá trị số nguyên lớn hơn 2 ^ 53 hoặc nhỏ hơn -2 ^ 53 đối với âm. Điều này có nghĩa là bạn có thể làm việc với các số lên đến khoảng 16 chữ số thập phân.
Đôi khi, điều này có thể là không đủ. Bạn có thể cần thứ gì đó có thể xử lý những con số thậm chí còn lớn hơn thế. Trong trường hợp đó, bạn có thể sử dụng giá trị BigInt mới. Bạn có thể sử dụng BigInt để biểu diễn một số giá trị tùy ý. Khi bạn muốn tạo BigInt, bạn làm điều đó bằng cách thêm n vào cuối số.
Khi làm việc với React và TypeScript, có lẽ bạn sẽ không cần phải sử dụng BigInt thường xuyên. Có lẽ không bao giờ. Tuy nhiên, vẫn tốt để biết nó là gì.
/ The ': bigint' after variable name
// and before equal sign specifies bigint type
// Declare new variable of type bigint
let bigIntExampleTwo: bigint
// Assign a value to 'bigIntExampleTwo'
bigIntExampleTwo = 987654321987654321987654321987654321000n
// Try to change the value of 'bigIntExampleTwo' to different type
bigIntExampleTwo = 159 // error: Type '159' is not assignable to type 'bigint'.
// Declare and initialize variable of type bigint
const bigIntExample: bigint = 1234567890123456789012345678901234567890n // bigint type is not necessary here due to type inference
String
Trong JavaScript, chuỗi đại diện cho một số dữ liệu dạng văn bản, một mảng ký tự nếu bạn muốn. Khi bạn muốn tạo một chuỗi, bạn có thể sử dụng dấu ngoặc kép, dấu ngoặc kép hoặc ký tự mẫu hoặc chuỗi mẫu. Các chuỗi trong TypeScript hoạt động theo cách tương tự.
// The ': string' after variable name
// and before equal sign specifies string type
// Declare new variable of type string
let stringExample: string
// Assign a value to 'stringExample'
stringExample = 'This is the initial value.'
// Try to change the value of 'stringExample' to different type
stringExample = 33 // error: Type '33' is not assignable to type 'string'.
// Declare and initialize variable of type string'
const singleQuoteString: string = 'This is a single quote string.' // string type is not necessary here due to type inference
const doubleQuoteString: string = "This is a double quote string." // string type is not necessary here due to type inference
const templateLiteralString: string = `This is a template literal string.` // string type is not necessary here due to type inference
Boolean
Boolean are very simple, logical, type. It has only two values: true and false.
// The ': boolean' after variable name
// and before equal sign specifies boolean type
// Declare new variable of type boolean
let booleanExampleTwo: boolean
// Assign a value to 'booleanExampleTwo'
booleanExampleTwo = false
// Try to change the value of 'booleanExampleTwo' to different type
booleanExampleTwo = 'false' // error: Type '"false"' is not assignable to type 'boolean'.
// Declare and initialize variable of type boolean
const booleanExample: boolean = true // boolean type is not necessary here due to type inference
The “null” value
Giá trị null là giá trị đặc biệt. Nó là một kiểu con của các kiểu mặc định khác. Trong JavaScript, null đại diện cho "trống", "giá trị không xác định" hoặc "không có gì".
The “undefined” value
Giá trị không xác định là một giá trị đặc biệt khác, tương tự như giá trị null. Ý nghĩa của undefined là "giá trị không được gán". Ví dụ, nếu bạn khai báo một biến, nhưng không gán bất kỳ giá trị nào cho nó, giá trị của nó sẽ không được xác định. Không xác định hoạt động theo cách tương tự như null.
Symbol
Tương tự như BigInt, Symbol là một kiểu mới khác đã được thêm vào đặc tả ngôn ngữ JavaScript. Biểu tượng là một giá trị nguyên thủy duy nhất và bất biến (không thể thay đổi), giống như một ID duy nhất. Các ký hiệu được sử dụng làm định danh duy nhất cho các đối tượng.
// The ': symbol' after variable name
// and before equal sign specifies symbol type
// Declare new variable of type symbol
let symbolExample: symbol
// Assign a value to 'symbolExample'
symbolExample = Symbol('Two')
// Try to change the value of 'symbolExample' to different type
symbolExample = 'some text' // error: Type '"some text"' is not assignable to type 'symbol'.
// Declare and initialize variable of type symbol
let symbolExample: symbol = Symbol('One') // symbol type is not necessary here due to type inference
// Create new variable of type symbol
const SECRET_KEY: symbol = Symbol() // symbol type is not necessary here due to type inference
// Use a computed property key to make the value of SECRET_KEY the key of a property, by putting the 'SECRET_KEY' in square brackets.
let myObj = {
[SECRET_KEY]: 123
}
Object
Kiểu đối tượng là một kiểu đặc biệt khác. Không giống như các kiểu khác, đối tượng có thể chứa các tập hợp nhiều kiểu khác nhau. Trong TypeScript, đối tượng đại diện cho bất kỳ thứ gì không phải là số, BigInt, chuỗi, boolean, null, undefined hoặc ký hiệu. Đây cũng là một trong những kiểu bạn sẽ gặp khá thường xuyên khi làm việc với React và TypeScript.
// The ': object' after variable name
// and before equal sign specifies object type
// Declare new variable of type object
let objectExample: object
// Assign a value to 'objectExample'
objectExample = {
firstName: 'Tony',
lastName: 'Wayne'
}
// Try to change the value of 'objectExample' to different type
objectExample = 'Tony'// error: Type '"Tony"' is not assignable to type 'object'.
// Try to change the value of 'objectExample' to array
objectExample = ['Tony', 'Wayne'] // This is okay (array is an object)
// Declare and initialize variable of type object
let myObj: object = {} // object type is not necessary here due to type inference
// Create object with one key/value pair
// where the key is 'someKey' and its value is type of number
let myObj: { someKey: number } = {
someKey: 123
}
Array
// The ': string[]' after variable name
// and before equal sign specifies array type containing strings
// Declare new variable of type array (the first way with '[]')
let names: string[]
// Assign a value to 'names'
names = ['Axel', 'Timothy', 'Jane']
// Try to change the value of 'names' to different type
names = 'Jane'// error: Type '"Jane"' is not assignable to type 'string[]'.
// Declare and initialize variable of type array containing numbers (the first way with '[]')
let ages: number[] = [28, 37, 24] // number[] type is not necessary here due to type inference
// Declare new variable of type array containing strings (the second way with 'Array<elementType>')
let hobbies: Array<string>
// Assign a value to 'names'
hobbies = ['Programming', 'Meditation', 'Reading']
// Declare and initialize variable of type array containing numbers (the second way with 'Array<elementType>')
let mensaNumbers: Array<number> = [658, 983, 4421] // Array<number> type is not necessary here due to type inference
Tuple
Các kiểu tuple là kiểu đầu tiên cụ thể cho TypeScript. Mặc dù loại này không tồn tại trong JavaScript, nhưng bạn có thể thấy nó hữu ích trong các dự án của mình được xây dựng bằng React và TypeScript. Nó có thể là sự thay thế thú vị cho mảng. Kiểu tuple cho phép bạn khai báo một mảng với một số phần tử cố định và các kiểu đã biết.
// The ': [elementType]' after variable name
// and before equal sign specifies tuple type
// Declare a new variable of type tuple with two values, both numbers
let tupleExample: [number, number]
// Assign a value to 'tupleExample'
tupleExample = [59, 62]
// Declare and initialize variable of type tuple with two values, both strings
let tupleExampleTwo: [string, string] = ['Axel', 'Smith'] // tuple type is not necessary here due to type inference
// Try to assign different types to tuple
let tupleExampleThree: [number, string]
// Assign a value to 'names'
// switch the order of values - string, number instead of number, string
tupleExampleThree = ['alphabet', 1]
// error 1 ('alphabet'): Type 'string' is not assignable to type 'number'.
// error 2 (1): Type 'number' is not assignable to type 'string'.
Enum
Theo cảm nhận nó giống khai báo một danh sách các hằng số (Thông qua đó có thể lấy được vị trí và giá trị)
Kiểu enum là một kiểu cụ thể khác của TypeScript. Nó cũng là một loại bạn có thể sử dụng thường xuyên nếu bạn làm việc với React và TypeScript. Kiểu enum được định nghĩa là một tập hợp các giá trị. Nó tương tự như đối tượng và mảng. Các giá trị được phân tách bằng dấu phẩy. Nó cho phép bạn đặt tên thân thiện hơn cho các giá trị số.
Có hai điểm khác biệt. Điều đầu tiên là nó không chứa các cặp khóa / giá trị, chỉ có các giá trị. Thứ hai là không có dấu bằng (=) trước dấu ngoặc nhọn ({}). Tương tự với mảng, enum cũng bắt đầu bằng chỉ số 0. Vì vậy, khi bạn muốn tham chiếu một trong các giá trị, bạn có thể sử dụng chỉ mục này, giống như khi bạn làm việc với một mảng.
Chỉ số này không được thiết lập bằng đá. Bạn có thể thay đổi nó nếu bạn muốn. Bạn có thể làm điều này bằng cách sử dụng dấu bằng (=) theo sau là số (chỉ mục) trong khi khai báo enum.
// Create enum
enum Languages {
JavaScript,
C,
Java,
Ruby,
PHP
}
// Declare and initialize variable
// using one language from Languages enum using index
const favoriteLanguage: Languages = Languages.JavaScript
// Log the value of favoriteLanguage
console.log(favoriteLanguage) // 0
// Get the name of the value on index 0
const favoriteLanguage: Languages = Languages[0]
// Log the value of favoriteLanguage
console.log(favoriteLanguage) // JavaScript
// Create enum with custom indexes, using '= number'
enum Names {
One = 1, // set index to 1
Two = 3, // set index to 3
Three = 8 // set index to 8
}
// Declare and initialize variables using Names enum
const enumExOne: Names = Names.One
const enumExTwo: Names = Names.Two
const enumExThree: Names = Names.Three
// Log variable values
console.log(enumExOne) // 1
console.log(enumExTwo) // 3
console.log(enumExThree) // 8
Một ví dụ hay sử dụng enum :)
export enum Urls {
Home = "/",
About = "/about",
Start = "/start",
Info = "/info",
Finish = "/finish"
}
Void
Kiểu void được chỉ định rằng không có kiểu hoặc không có kiểu nào. Loại này thường được sử dụng làm loại trả về của các hàm không trả về bất kỳ giá trị nào. Trong trường hợp của React và TypeScript, void thường được sử dụng làm kiểu trả về của các hàm để xử lý các sự kiện. Trong trường hợp có biến, void không hữu ích gì cả.
Khi bạn khai báo một số biến kiểu void, bạn có thể gán cho nó chỉ gán null hoặc undefined. Điều này chỉ có thể thực hiện được nếu bạn tắt tùy chọn / quy tắc nghiêm ngặt (hoặc cờ).
// The ': void' after variable name and parenthesis
// and before equal sign specifies void type
// Create function with return type of void
// (function doesn't return any value)
function sayHi(): void {
console.log('There is no return statement here.')
}
// Declare and initialize variable of type void as undefined
let thisWillNotBeUsed: void = undefined
// This will work if you disable strictNullChecks
thisWillNotBeUsed = null
// Create onChange event handler function that accepts
// one argument (event) and doesn't return any (return of type void)
const handleInput = (event: React.ChangeEvent): void => {
setName(event.target.value) // Update state with value
}
// some code
<input onChange={handleInput} />
// Create click event handler function that accepts
// one argument (event) and doesn't return any (return of type void)
const handleClick = (): void => {
console.log('Click')
}
// some code
<Button onClick={handleClick}>Click</Button>
// Try to create function with return type of void
// that returns a string
function sayHi(): void {
return 'Looks like return.' // error: Type '"Looks like return."' is not assignable to type 'void'.
}
Never
Loại never là một trong những loại bạn không có khả năng sử dụng với React và TypeScript. Loại này là nơi mã không bao giờ có thể truy cập được hoặc khi giá trị trả về không bao giờ xảy ra. Trong trường hợp các hàm, một hàm không bao giờ trả về hoặc luôn ném ngoại lệ, sẽ trả về không bao giờ. Ví dụ, một hàm có vòng lặp while vô hạn.
Khi bạn tạo một hàm như vậy, với vòng lặp vô hạn, TypeScript sẽ cho phép mã của bạn biên dịch. Tuy nhiên, TypeScript sẽ suy ra rằng hàm có kiểu trả về là never. Trong trường hợp các biến, tương tự như void, never cũng không hữu ích lắm.
Khi bạn khai báo một số kiểu biến, bạn không thể gán bất kỳ kiểu nào khác cho nó. Bạn chỉ có thể sử dụng loại không bao giờ. TypeScript cũng sẽ suy ra không bao giờ khi bạn thu hẹp các bảo vệ kiểu để nó không bao giờ đúng.
// The ': never' after variable name and parenthesis
// and before equal sign specifies never type
// Create function with one parameter that throws an exception,
// returns type of never
function throwError(message: string): never {
throw new Error(message)
}
// Create function with infinite loop,
// returns type of never
function getStuck(): never {
while (true) {
console.log('Infinite loop.')
}
}
// Declare variable of type never
let neverOne: never
// Try to change the value of neverOne
neverOne = 'Some thing' // error: Type '"Some thing"' is not assignable to type 'never'.
// Never and narrowing type guards
function processThis(value: any) {
// Check for impossible type of value
// such as string, number and object at the same time
if (typeof value === 'string' && typeof value === 'number' && typeof value === 'object') {
// This will never happen
value // TypeScript will infer type never
}
}
Any
Kiểu bất kỳ là kiểu cuối cùng bạn có thể gặp và sử dụng trong TypeScript. Nó cũng là loại được sử dụng nhiều nhất hoặc bị lạm dụng bởi những người mới bắt đầu sử dụng TypeScript. Biến bất kỳ thường được sử dụng khi bạn không biết loại biến hoặc bạn không cần chỉ định biến. Một ví dụ có thể là khi chương trình của bạn không yêu cầu một số loại cụ thể.
Một ví dụ khác là khi bạn làm việc với các gói, mô-đun và API của bên thứ ba và bạn không biết điều gì sẽ xảy ra. Hoặc, nếu bạn chỉ biết một phần những gì mong đợi. Ví dụ, bạn biết giá trị sẽ là một mảng, nhưng bạn không biết gì về nội dung của nó. Trong những trường hợp này, bất kỳ lệnh nào sẽ yêu cầu TypeScript bỏ qua kiểm tra loại và để mã của bạn biên dịch.
Loại bất kỳ cũng rất tiện dụng khi bạn muốn viết lại dần mã JavaScript của mình thành TypeScript. Hoặc, khi bạn chuyển từ React sang React và TypeScript. Cách thức hoạt động rất đơn giản. Nó cho TypeScript biết rằng giá trị có thể thuộc bất kỳ kiểu nào. Nó có thể là chuỗi, số, boolean, mảng, đối tượng, bất cứ thứ gì. Vì vậy, không có gì phải phàn nàn.
// The ': any' after variable name
// and before equal sign specifies any type
// Declare variable of type any
let anyExample: any
// Assign a number to anyExample
anyExample = 19 // This is okay
// Change the value of anyExample and also its type
anyExample = 'The power of any' // This is okay
// Change the value of anyExample and also its type again
anyExample = false // This is okay
// Using any with partially known data
// Create function to fetch some API
function fetchApi() {
fetch('endpoint')
.then(res => {
// Data will be an array with something inside,
// but we don't know what is the type of data
const fetchedData = res.data
console.log(fetchedData)
})
.catch(error => console.log(error))
}
fetchApi()
Type inference
Trong suốt các ví dụ, tôi thêm các nhận xét nói rằng kiểu không cần thiết ở nơi đó do kiểu suy luận. Kiểu suy luận là gì? Không cần thiết phải chú thích loại mỗi lần. Trong một số trường hợp, TypeScript sẽ thực hiện việc này cho bạn. Nó sẽ tự động suy ra các loại biến và tham số dựa trên các giá trị mặc định.
Có ba tình huống khi điều này sẽ xảy ra. Đầu tiên, TypeScript sẽ suy ra kiểu của biến khi biến được khai báo và cũng được khởi tạo. Thứ hai, TypeScript sẽ suy ra loại tham số khi bạn đặt giá trị mặc định cho tham số đó. Thứ ba, TypeScript sẽ suy ra kiểu trả về khi hàm trả về một giá trị nào đó.
Nếu bạn thấy mình có bất kỳ trường hợp nào trong ba trường hợp này, bạn không cần phải chú thích hoặc chỉ định, các loại. Điều gì sẽ xảy ra nếu bạn quên chú thích một số biến hoặc tham số? TypeScript sẽ tự động sử dụng loại bất kỳ. Nếu bạn bật tùy chọn noImplicitAny, hoặc nghiêm ngặt, TypeScript sẽ tự động cảnh báo bạn khi điều này tiềm ẩn xảy ra.
// Declare and initialize value
let userAge = 46
// TypeScript will infer: let userAge: number
let isAlive = true
// TypeScript will infer: let isAlive: boolean
let username = 'Stan Wayne'
// TypeScript will infer: let username: string
let arr = [59, 890, 563]
// TypeScript will infer: let arr: number[]
let userData = {
name: 'axel',
age: 28,
isAlive: true
}
// TypeScript will infer:
// let userData: {
// name: string;
// age: number;
// isAlive: boolean;
// }
// Function with parameter(s) with default value
function greetUser(name = 'anonymous') {
return `Welcome back ${name}`
}
// TypeScript will infer: function greetUser(name?: string): string
// function greetUser with optional parameter type of string and return type of string
// Function returning value
function greetUser() {
return 'Welcome back!'
}
// TypeScript will infer: function greetUser(): string
// function greetUser with return type of string
// Function with return type of void
function noReturn() {
console.log('This is void.')
}
// TypeScript will infer: function noReturn(): void
// function noReturn with return type of void
// Only declaring a variable
let something
// TypeScript will infer: let something: any
Điều gì sẽ xảy ra nếu bạn có một số bộ sưu tập dữ liệu với các giá trị thuộc các loại khác nhau? TypeScript có suy ra các loại ở đây không? Nó sẽ được thôi. TypeScript sẽ suy ra chính xác tất cả các loại cho bạn.
// Array with number, string and boolean
let arrOne = [15, 'Tony Grand', false]
// TypeScript will infer: let arrOne: (string | number | boolean)[]
// Array with numbers and boolean
let arrTwo = [165, 98956, 9494, true]
// TypeScript will infer: let arrTwo: (number | boolean)[]
// Object with number, strings, boolean and array
let userObj = {
firstName: 'Arthur',
lastName: 'Bailey',
age: 35,
isMarried: false,
skills: [
'design',
'programming'
]
}
// TypeScript will infer:
// let userObj: {
// firstName: string;
// lastName: string;
// age: number;
// isMarried: boolean;
// skills: string[];
// }
