Simple typescript with react v4.3
const greeting : string = "Hello typescript" ;
const year : number = 2022 ;
const addTwoNumber = ( a :number , b :number ) : number => a + b ;
function addTwoNumber ( a : number , b :number ) : number {
return a + b ;
}
interface User {
id : string ;
name : string
age : number ,
email : string
}
const getUserById = ( id : string ) : User => ( {
id,
name : "Mich" ,
age : 33 ,
email : "mich@gmail.com"
} ) ;
interface Book {
id : string ;
name : string ;
releaseDate ?: Date ; // Optional ?:
}
const getBookById ( id : string ) : Book => ( {
id,
name : "Typescript" ,
} )
const getBookByIdWithDate ( id : string ) : Book => ( {
id,
name : "Typescript" ,
releaseDate : new Date ( ) ,
} )
const users : string [ ] = [
"Mich" ,
"Vishal" ,
"Pranav"
] ;
const listOfNum : number [ ] = [ 1 , 2 , 4 ] ;
const nums : Array < number > = [ 1 , 2 , 3 ]
const stringOrNumber : ( string | number ) [ ] = [ 1 , 'hello' , 2022 , "Michael" ]
// Tuples -> fixed length array
const tuple : [ number , string ] = [ 2022 , "Why" ] ;
// ☝️ first has to be a number and second has to be string
const wrong : [ number , string ] = [ 'why' , 2022 ] ; // wrong
// Literals Type
const windOrLoose = ( ) : "Win" | "Loose" => Math . random ( ) < 0.5 ? "Win" : "Loose" ;
enum UserResponse {
No = 0 ,
Yes = 1 ,
}
enum UserResponse1 {
No = "No" ,
Yes = "Yes" ,
}
function respond ( recipient : string , message : UserResponse ) : void {
// ...
}
function respond1 ( recipient : string , message : UserResponse1 ) : void {
// ...
}
respond ( "Princess Caroline" , UserResponse1 . Yes )
// More https://www.typescriptlang.org/docs/handbook/enums.html#string-enums
// Void
const logger = ( something : unknown ) : void => console . log ( something )
// null
interface User {
id : string ;
email : string ;
name : string | null ;
age : number | null
}
const createUser = ( email : string ) : User => ( {
id : 'new-id' ,
email,
name : null ,
age :null ,
} )
const user = createUser ( "hello@email.com" )
const logger = ( something : unknown ) : void => {
if ( typeof something === string ) {
console . log ( something . toUpperCase ( ) )
} else {
console . log ( something )
}
}
logger ( "Typescript" ) ;
logger ( { foo : 'bar' } )
Interfaces and Type Aliases
interface UserCreateEvent = {
eventType : 'USER_CREATED' ,
parameters : {
id : string ,
name : string ,
email : string
}
}
interface UserDeletedEvent = {
eventType : 'USER_DELETED' ,
parameters : {
id : string ,
}
}
type BetterUserEvent = UserCreateEvent | UserDeletedEvent ;
const handleBetterUserEvent = ( event : BetterUserEvent ) => {
if ( event . eventType === 'USER_CREATED' ) {
console . log ( event . parameters . email ) ;
return
}
if ( event . eventType === 'USER_DELETED' ) {
console . log ( event . parameters . id ) ;
console . log ( event . parameters . name ) ; // will error
return
}
}
type Dictionary = {
[ key :string ] : string
}
// e.g
const dict : Dictionary = {
foo : 'bar' ,
bar : 'baz'
}
type OtherDictionary = Record < string , string >
type UnknownRecord = Record < PropertyKey , unknown > ;
interface Box < T > {
contents : T
}
const boxOfStrings : Box < string [ ] > = {
contents : [ 'hello' , 'Typescript' ]
}
const boxOfString : Box < string > = {
contents : 'hello'
}
const boxOfNumbers : < number [ ] > = {
contents : [ 1 , 2 , 3 ]
}
const identity = < T > ( x : T ) : T => x
const rendomElement = < T > ( xs : T [ ] ) : T => {
const rendomeIndex = Math . floor ( x : Math . random ( ) * xs . length ) ;
return xs [ rendomeIndex ] ;
}
const a = randomElement ( [ 1 , 2 , 4 ] ) ;
const b = randomElement ( [ "a" , "b" ] ) ;
// 2nd
const rendomElement = < T , U > ( xs : T [ ] , ys : U [ ] ) : T | U => {
const rendomeIndex = Math . floor ( x : Math . random ( ) * xs . length ) ;
const useX = Math . random ( ) < 0.5 ;
return useX ? xs [ rendomeIndex ] : ys [ randomIndex ] ;
}
const a = randomElement ( [ 1 , 2 , 4 ] , [ 'a' , 'b' ] ) ;